<template>
  <header v-if="!isWebview" class="page-header">
    <b-navbar toggleable="lg" type="dark" variant="dark">
      <b-navbar-brand href="/"><img src="/assets/images/logo-transparent.png" height="40" alt="">&nbsp;千佛岩石窟</b-navbar-brand>
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav class="ml-auto">
          <span v-for="item in siteCategory" :key="item.id">
            <b-nav-item-dropdown v-if="item.cateType === 'group' && item.children" :text="item.cateName" right>
              <b-dropdown-item v-for="node in item.children" :key="node.id" :href="node.url">{{ node.cateName }}</b-dropdown-item>
            </b-nav-item-dropdown>
            <b-nav-item v-else :href="item.url" :active="true">
              {{ item.cateName }}
            </b-nav-item>
          </span>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </header>
</template>

<script>
export default {
  props: {
    activeId: {
      default: 1
    }
  },

  data () {
    return {
      navList: [
        {id: 1, text: '首页', href: '/'}
      ]
    }
  },

  computed: {
    isWebview() {
      return this.$store.state.isWebview
    },
    siteCategory() {
      let list = [...this.$store.getters.siteCategory]
      list.unshift({id: 0, cateName: '首页', url: '/'})
      return list
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/css/header.less';
</style>
